<template>
  <div class="warpper-box news-details">
    <header style="text-align: center;">
      <h1 style="font-weight: 600;">{{ news.title }}</h1>
    </header>
    <div class="news-date">
      <div>{{ news.createdTime }}</div>
      <a-button class="copy-qb" size="small" icon="share-alt" @click="copyQbUrl()">分享</a-button>
    </div>
    <div class="news-content" v-html="news.content"></div>
    <div class="news-related">
      <div v-for="(item, index) in news.fileList" :key="index" style="display: flex;justify-content: space-between;">
        <h4>{{ item.fileName }}</h4>
        <a :href="item.fileUrl" :download="item.fileUrl" target="_blank">下载</a>
      </div>
    </div>
    <!-- 返回||提交 -->
    <div style="height: 60px;"></div>
    <a-card class="footBtn" hoverable :bordered="false">
      <a-button key="back" icon="logout" class="ant-btn-warning" @click="goBack">返回</a-button>
      <!-- <a-button type="primary" icon="file-done" @click="submit" style="margin-left: 10px;">提交</a-button> -->
    </a-card>
  </div>
</template>  
  
<script>
import {
  policyQuery
} from "@/api/human/park"
import Clipboard from "clipboard"
export default {
  data() {
    return {
      policyId: '',
      news: {},
    };
  },
  activated() {
    this.policyId = this.$route.query.policyId || "";
    this.getDetail();
  },
  methods: {
    async getDetail() {
      const { code, data } = await policyQuery(this.policyId);
      if (code === '1') {
        this.news = data
      }
    },
    // 复制方法
    copyQbUrl() {
      // let url = process.env.VUE_APP_CODE_URL + '/policyDetail.html?policyId=' + this.policyId;
      let url = 'http://120.77.240.246/policyDetail.html?policyId=' + this.policyId;
      let clipboard = new Clipboard('.copy-qb', {
        text: () => {
          return url
        }
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功！')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制！')
        clipboard.destroy()
      })
    },
    // 返回
    goBack() {
      this.$router.back();
    }
  }
};  
</script>  
  
<style lang="less" scoped>  .news-details {
    /* 样式设置 */
    padding: 40px 120px;

    .news-date {
      /* 新闻内容的样式设置 */
      color: #999;
      font-size: 12px;
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .news-content {
      /* 新闻内容的样式设置 */
      color: #333;
      font-size: 16px;
    }

    .news-related {
      /* 相关新闻部分的样式设置 */
      padding-top: 20px;
      border-top: 1px solid #ccc;
      font-size: 20px;
    }
  }
</style>